import React from 'react';
import type { FormulaFormatOptions } from '../../types';
import './FormatToolbar.css';

interface FormatToolbarProps {
  formatOptions?: any;
  onFormatChange: (format: Partial<FormulaFormatOptions>) => void;
  onExport: (format: 'latex' | 'svg' | 'png' | 'mathml') => void;
  onCopyLatex: () => void;
}

/**
 * 格式工具栏组件 - 用于调整公式的格式和导出选项
 */
export const FormatToolbar: React.FC<FormatToolbarProps> = ({ formatOptions, onFormatChange, onExport, onCopyLatex }) => {
  /**
   * 处理字体大小变化
   */
  const handleFontSizeChange = (size: number) => {
    onFormatChange({ fontSize: size });
  };

  /**
   * 处理颜色变化
   */
  const handleColorChange = (color: string) => {
    onFormatChange({ color });
  };

  /**
   * 处理对齐方式变化
   */
  const handleAlignChange = (align: 'left' | 'center' | 'right') => {
    onFormatChange({ align });
  };

  /**
   * 处理导出
   */
  const handleExport = (exportFormat: 'latex' | 'svg' | 'png' | 'mathml') => {
    onExport(exportFormat);
  };

  // 预定义的颜色选项
  const colorOptions = [
    { label: '黑色', value: '#000000' },
    { label: '红色', value: '#ff0000' },
    { label: '蓝色', value: '#1976d2' },
    { label: '绿色', value: '#4caf50' },
    { label: '紫色', value: '#9c27b0' },
    { label: '橙色', value: '#ff9800' }
  ];

  return (
    <div className="format-toolbar">
      {/* 字体大小控制 */}
      <div className="toolbar-group">
        <label className="toolbar-label">字体大小:</label>
        <div className="button-group">
          <button
            className={`format-button ${(formatOptions?.fontSize || 100) === 100 ? 'active' : ''}`}
            onClick={() => handleFontSizeChange(100)}
            title="100%"
          >
            100%
          </button>
          <button
            className={`format-button ${(formatOptions?.fontSize || 100) === 120 ? 'active' : ''}`}
            onClick={() => handleFontSizeChange(120)}
            title="120%"
          >
            120%
          </button>
          <button
            className={`format-button ${(formatOptions?.fontSize || 100) === 150 ? 'active' : ''}`}
            onClick={() => handleFontSizeChange(150)}
            title="150%"
          >
            150%
          </button>
        </div>
      </div>

      {/* 颜色控制 */}
      <div className="toolbar-group">
        <label className="toolbar-label">颜色:</label>
        <div className="color-picker">
          {colorOptions.map(color => (
            <button
              key={color.value}
              className={`color-button ${(formatOptions?.color || '#000000') === color.value ? 'active' : ''}`}
              style={{ backgroundColor: color.value }}
              onClick={() => handleColorChange(color.value)}
              title={color.label}
              aria-label={`选择颜色: ${color.label}`}
            />
          ))}
          <input
            type="color"
            className="custom-color-input"
            value={formatOptions?.color || '#000000'}
            onChange={(e) => handleColorChange(e.target.value)}
            title="自定义颜色"
          />
        </div>
      </div>

      {/* 对齐方式控制 */}
      <div className="toolbar-group">
        <label className="toolbar-label">对齐:</label>
        <div className="button-group">
          <button
            className={`format-button align-button ${(formatOptions?.align || 'center') === 'left' ? 'active' : ''}`}
            onClick={() => handleAlignChange('left')}
            title="左对齐"
          >
            ⬅️
          </button>
          <button
            className={`format-button align-button ${(formatOptions?.align || 'center') === 'center' ? 'active' : ''}`}
            onClick={() => handleAlignChange('center')}
            title="居中对齐"
          >
            ⬌
          </button>
          <button
            className={`format-button align-button ${(formatOptions?.align || 'center') === 'right' ? 'active' : ''}`}
            onClick={() => handleAlignChange('right')}
            title="右对齐"
          >
            ➡️
          </button>
        </div>
      </div>

      {/* 分隔线 */}
      <div className="toolbar-separator"></div>

      {/* 导出和复制功能 */}
      <div className="toolbar-group">
        <label className="toolbar-label">导出:</label>
        <div className="button-group">
          <button
            className="format-button export-button"
            onClick={() => handleExport('latex')}
            title="导出LaTeX"
          >
            LaTeX
          </button>
          <button
            className="format-button export-button"
            onClick={() => handleExport('svg')}
            title="导出SVG"
          >
            SVG
          </button>
          <button
            className="format-button export-button"
            onClick={() => handleExport('png')}
            title="导出PNG"
          >
            PNG
          </button>
          <button
            className="format-button export-button"
            onClick={() => handleExport('mathml')}
            title="导出MathML"
          >
            MathML
          </button>
        </div>
      </div>

      {/* 复制按钮 */}
      <div className="toolbar-group">
        <button
          className="format-button copy-button"
          onClick={onCopyLatex}
          title="复制LaTeX代码"
        >
          📋 复制LaTeX
        </button>
      </div>
    </div>
  );
};

export default FormatToolbar;